<template>
  <div class="home">
    <div class="home_main_top">
      <div class="left">
        <Cataleft />
      </div>
      <div class="right">
        <div class="top">
          <div class="top_left">
            <img v-if="imgs.length" :src="imgs[activeSwiperId].imageInput" />
            <ul>
              <li :class="{ swiperActive: activeSwiperId === index }" v-for="(i, index) in imgs" :key="i.id" @mouseenter="enterLi(index)" @mouseleave="leaveOut">{{ index + 1 }}</li>
            </ul>
          </div>
          <div class="top_right">
            <div class="top_right_top">
              <h2>公告</h2>
              <el-scrollbar class="t_r_t_bottom">
                <li v-for="{i} in noticeLists" :key="i.id" @click="toNoticeHelp(i.content)">
                  <span>{{ i.title }}</span>
                  <span>{{ i.createTime }}</span>
                </li>
              </el-scrollbar>
            </div>
            <div class="top_right_bottom">
              <div class="top">
                <h2>帮助</h2>
              </div>
              <el-scrollbar class="bottom">
                <li v-for="i in helpLists" :key="i.id" @click="toNoticeHelp(i.content)">
                  <span>{{ i.title }}</span>
                  <span>{{ i.createTime }}</span>
                </li>
              </el-scrollbar>
            </div>
          </div>
        </div>
        <div class="bottom">
          <div class="top">
            <div class="text">热</div>
            <div class="right"><span>门图书</span></div>
          </div>
          <div class="bot_swper">
            <div class="swiper_con">
              <el-carousel indicator-position="outside" class="height:100%;">
                <el-carousel-item>
                  <ul>
                    <li v-for="i in hotBooksLists.slice(0, 10)" :key="i.id">
                      <el-link @click="toDetail(i)" class="item_a" :underline="false">
                        <img :src="i.image" />
                      </el-link>
                      <p class="name">
                        <el-link @click="toDetail(i)">{{ i.storeName }}</el-link>
                      </p>
                      <p class="author">{{ i.translator }}</p>
                      <p class="price">
                        <span class="rob">
                          <span>￥</span>
                          <span>{{ i.price }}</span>
                        </span>
                        <span class="rob2">
                          <span>￥</span>
                          <span>{{ i.vipPrice }}</span>
                        </span>
                      </p>
                    </li>
                  </ul>
                </el-carousel-item>
              </el-carousel>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="home_main">
      <MainCate />
    </div>
  </div>
  <!-- 引入主题左侧 -->
</template>

<script>
import Cataleft from './cateleft'
import MainCate from './maincate'
export default {
  name: 'home',
  data() {
    return {
      imgs: [
        // { id: 1, src: require('@/assets/img/swiper/a1.jpg'), display: false },
        // { id: 2, src: require('@/assets/img/swiper/a2.jpg'), display: false },
        // { id: 3, src: require('@/assets/img/swiper/a3.jpg'), display: false },
      ],
      activeSwiperId: 0,
      timer: null,
      hotBooksLists: [],
      noticeLists: [],
      helpLists: [],
    }
  },
  components: {
    Cataleft,
    MainCate,
  },
  mounted() {
    this.timer = setInterval(this.autoSwiper, 3000)
    this.getHotBookLists()
    // 获取公告信息
    this.getNoticeLists()
    // 获取帮助信息
    this.getHelpLists()
    // 获取轮播的数据
    this.getSwiperLists()
  },
  methods: {
    /* 路由跳转 */
    navigations() {
      let routeUrl = this.$router.resolve({
        path: '/cate',
        query: { id: 96 },
      })
      window.open(routeUrl.href, '_blank')
    },
    autoSwiper() {
      if (this.activeSwiperId === this.imgs.length - 1) {
        this.activeSwiperId = 0
      } else {
        this.activeSwiperId += 1
      }
    },
    enterLi(index) {
      this.activeSwiperId = index
      clearInterval(this.timer)
    },
    leaveOut() {
      this.timer = setInterval(this.autoSwiper, 3000)
    },
    getHotBookLists() {
      this.$http
        .get('product/hot')
        .then((res) => {
          console.log(res)
          this.hotBooksLists = res.data.data.list
          for (let i = 0; i < 2; i++) {
            this.hotBooksLists.forEach((item) => {
              this.hotBooksLists.push(item)
            })
          }
          console.log(this.hotBooksLists)
        })
        .catch((e) => {
          console.log(e.message)
        })
    },
    // 去详情页
    toDetail(row) {
      // console.log(row)
      let routeUrl = this.$router.resolve({
        path: '/detail',
        query: {
          id: row.id,
        },
      })
      window.open(routeUrl.href, '_blank')
    },
    /* 跳转通知帮助页面 */
    toNoticeHelp(id) {
      let routeUrl = this.$router.resolve({
        path: '/noticehelp',
        query: {
          id,
        },
      })
      window.open(routeUrl.href, '_blank')
    },
    /* 获取公告信息 */
    getNoticeLists() {
      this.$http
        .get('article/list/601')
        .then((res) => {
          if (res.data.code === 200) {
            this.noticeLists = res.data.data.list
            console.log(this.noticeLists)
          } else {
            this.$message.error(res.data.message)
          }
        })
        .catch((e) => {
          this.$message.error(e.message)
        })
    },
    /* 获取帮助信息 */
    getHelpLists() {
      this.$http
        .get('article/list/692')
        .then((res) => {
          if (res.data.code === 200) {
            this.helpLists = res.data.data.list
            console.log(this.helpLists)
          } else {
            this.$message.error(res.data.message)
          }
        })
        .catch((e) => {
          this.$message.error(e.message)
        })
    },
    /* 获取轮播的数据 */
    getSwiperLists() {
      this.$http
        .get('article/list/2068')
        .then((res) => {
          if (res.data.code === 200) {
            this.imgs = res.data.data.list
            console.log(this.imgs)
          } else {
            this.$message.error(res.data.message)
          }
        })
        .catch((e) => {
          this.$message.error(e.message)
        })
    },
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
}
</script>

<style scoped lang="scss">
.home {
  @include margin(1200px);
  height: 100%;
  .home_main_top {
    height: 916px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 20px;
    width: 100%;
    .left {
      width: 190px;
      height: 100%;
    }
    .right {
      width: 1000px;
      height: 100%;
      .top {
        @include h_w(100%, 315px);
        margin-bottom: 10px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        .top_left {
          width: 750px;
          height: 100%;
          position: relative;
          img {
            height: $full;
            width: $full;
          }
          ul {
            height: 21px;
            position: absolute;
            bottom: 10px;
            right: 0;
            font-family: 'Microsoft Yahei';
            z-index: 1;
            @include flex1(row, space-between, center);
            li {
              @include h_w(21px, 100%);
              @include circular(50%);
              @include text_center(21px);
              font-size: 14px;
              cursor: pointer;
              margin-right: 10px;
              color: #000;
              background: #fff;
              // &:hover {
              //   background: #ff4848;
              //   color: #fff;
              // }
            }
          }
        }
        .top_right {
          width: 240px;
          height: 100%;
          .top_right_top {
            @include h_w(100%, 110px);
            @include border1(1px, #eaeaea);
            @include padding1(6px, 10px);
            box-sizing: border-box;
            margin-bottom: 10px;
            // li {
            //   height: 22px;
            //   cursor: pointer;
            //   a {
            //     line-height: 22px;
            //   }
            // }
            .t_r_t_bottom {
              height: 70px;
              display: flex;
              flex-direction: column;
              li {
                height: 18px;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                padding: 0 10px;
                box-sizing: border-box;
                span {
                  display: block;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                }
                span:first-child {
                  width: 70%;
                }
                span:nth-child(2) {
                  width: 30%;
                  font-size: 11px;
                  color: #575757ba;
                }
              }
            }
          }
          .top_right_bottom {
            @include h_w(100%, 195px);
            @include border1(1px, #eaeaea);
            padding: 6px 10px 0;
            box-sizing: border-box;
            .top {
              width: 100%;
              height: 21px;
              @include flex1(row, space-between, center);
            }
            .bottom {
              @include h_w(100%, 140px);
              li {
                height: 18px;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                padding: 0 4px;
                box-sizing: border-box;
                span {
                  display: block;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                }
                span:first-child {
                  width: 64%;
                }
                span:nth-child(2) {
                  width: 36%;
                  font-size: 11px;
                  color: #575757ba;
                }
              }
            }
          }
        }
      }
      .bottom {
        @include h_w(100%, 592px);
        // background: #eaeaea;
        .top {
          @include h_w(100%, 43px);
          @include flex1(row, space-between, center);
          .text {
            @include h_w(43px, 100%);
            @include circular(50%);
            background: #487a6f;
            @include text_center(43px);
            font-family: revert;
            font-size: 24px;
            color: #fff;
            font-weight: bold;
          }
          .right {
            @include h_w(950px, 100%);
            border-bottom: 1.5px solid #487a6f;
            position: relative;
            span {
              position: absolute;
              bottom: 0;
              font-size: 20px;
              color: #487a6f;
            }
          }
        }
        .bot_swper {
          height: 540px;
          .swiper_con {
            height: 100%;
            ul {
              @include h_w(1000px, 532px);
              display: flex;
              flex-direction: row;
              flex-wrap: wrap;
              li {
                @include h_w(150px, 250px);
                margin: 0 25px 16px 25px;
                .item_a {
                  @include h_w(150px, 150px);
                  @include flex1(column, space-between, center);
                  img {
                    @include h_w(100%, 100%);
                  }
                }
                .name {
                  padding: 7px 20px 0;
                  @include h_w(110px, 18px);
                  line-height: 18px;
                  overflow: hidden;
                  a {
                    color: #000;
                    font-size: 12px;
                    text-decoration: none;
                    &:hover {
                      text-decoration: underline;
                      color: #ec7814;
                    }
                  }
                }
                .author {
                  @include h_w(110px, 24px);
                  @include padding1(20px, 0);
                  line-height: 24px;
                  overflow: hidden;
                  color: #aaa;
                }
                .price {
                  padding-left: 20px;
                  line-height: 16px;
                  overflow: hidden;
                  font-family: 'Arial';
                  font-size: 14px;
                  position: relative;
                  height: 36px;
                  @include h_w(100%, 18px);
                  .rob {
                    margin-right: 12px;
                    color: #c30;
                    overflow: hidden;
                    font-weight: bold;
                    margin-right: 12px;
                  }
                  .rob2 {
                    color: #aaa;
                    text-decoration: line-through;
                    overflow: hidden;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .home_main {
    @include margin(1200px);
  }
}
:deep(.el-carousel__container) {
  height: 520px;
  // margin-left: 30px;
}
.swiperActive {
  background: #ff4848 !important;
  color: #fff !important;
}
</style>
